<template>
  <div>
    <div id="main" style="width: 1600px;height: 700px"></div>
  </div>
</template>

<script>
import axios from "axios";
import report_center from "../../api/report_center";
import * as echarts from 'echarts';

export default {
  name: "bar",
  data() {
    return {}
  },
  created() {
    this.queryAllReportList()
  },
  mounted() {
  },
  methods: {
    queryAllReportList() {
      axios.all(report_center.queryAllReportList()).then(axios.spread(function () {
        //定义一个空数组来合并所有请求的数据（数组）里的元素
        let arrayList = [];
        //遍历参数请求
        for (let argument of arguments) {
          // console.log(argument)
          //拿到请求里的数组
          let key = Object.keys(argument.data.data)
          let dataList = argument.data.data[key]
          //循环中的前面输出的值疑似会被循环中后边其他的语句修改
          console.log(dataList)
          if (dataList == null) {
            console.log("该" + key + "为空")
            continue
          }
          //遍历数组元素加入到一个新数组（合并多个数组）
          let flag
          for (let data of dataList) {
            flag = true
            // 删掉多余的行
            delete data.数据来源

            // 遍历合并相同的key的value值
            for (let array of arrayList) {

              //根据key（car_no）去重
              if (array.car_no == data.car_no && arrayList.length != 0) {
                // 有则返回flag=false(不添加该条数据，转而将值添加到已有对应键的值上)，
                // 里边的值加对应的数值
                console.log("_______________")
                console.log("this is same：" + array.car_no)
                console.log("_______________")
                //这里会修改之前打印的输出
                array.car_expenses += data.car_expenses
                flag = false
              }
            }
            if (flag) {
              arrayList.push(data)
            }
          }
        }
        console.log(arrayList)

        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          title: {
            text: '车辆费用对比',
            subtext: '所有车辆',
            left: 'center'
          },
          dataset: [{
            dimensions: ['car_no', 'car_expenses'],
            source: arrayList,
          }, {
            transform: {
              type: 'sort',
              config: {dimension: 'car_expenses', order: 'desc'}
            }
          }],
          xAxis: {
            type: 'category',
            axisLabel: {interval: 0, rotate: 30},
          },
          yAxis: {},
          series: {
            type: 'bar',
            encode: {x: 'car_no', y: 'car_expenses'},
            datasetIndex: 1
          }
        };

        option && myChart.setOption(option);

      }))
    }
  }
}
</script>

<style scoped>

</style>
